<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>新增车辆加油</title>
<style type="text/css">
#header2 {
	height: 40px;
	background: #F6F6F6;
}

form {
	width: 90%;
	margin: 50px auto;
	padding: 20px;
	border: 2px solid black;
	border-radius: 10px;
	font-family: Arial, sans-serif;
	background-color: #f5f5f5;
}

h2 {
	text-align: center;
	margin-bottom: 30px;
}

label {
	display: inline-block;
	margin-bottom: 10px;
	font-weight: bold;
}

input[type="text"], input[type="number"], input[type="date"], textarea {
	display: block;
	width: 100%;
	height: 30px;
	padding: 5px;
	margin-bottom: 20px;
	border-radius: 5px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

textarea {
	height: 100px;
	resize: none;
}

.prompt{
	font-size:20px;
	color:red;
}
.input-with-unit {
  position: relative;
}

.unit {
  position: absolute;
  background:#D1D1D1;
  font-size:20px;
  padding: 0 5px;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.icon {
  position: relative;
  display: inline-block;
  margin-right: 5px;
}

.left-inputs {
	float: left;
	width: 48%;
}

.right-inputs {
	float: right;
	width: 48%;
}

.bottom-inputs {
	clear: both;
}

.buttons {
	margin-left: 230px;
	margin-top: 30px;
	text-align: center;
}

button {
	padding: 10px 20px;
	margin-right: 200px;
	border-radius: 5px;
	border: none;
	background-color: white;
	color: black;
	cursor: pointer;
	transition: all 0.3s ease;
}

button:hover {
	background-color: #333;
}

button:last-child {
	background-color: #2196F3;
}

button:last-child:hover {
	background-color: #0069c0;
}


</style>
</head>
<body>
	<div id="header2">
		<img src="img/申请用车.png" alt="Big Boat" width="30" height="30"
			style="vertical-align: middle;"> 车辆加油 > 添加加油信息
	</div>
	<form>
		<h2>新增车辆加油</h2>
		<div class="left-inputs">
			<label for="车牌号码"><span class="prompt">*</span>车牌号码:</label> 
			<input type="text" id="车牌号码" list="license plate" name="车牌号码" placeholder="请输入车牌号码" required>
			<datalist id="license plate">
				<option>赣A00000</option>
				<option>赣A00001</option>
				<option>赣A00002</option>
			</datalist>

			<label for="油料品种">油料品种:</label>
			<input type="text" id="油料品种" name="油料品种" list="oil_type" placeholder="请输入油料品种"required>
			<datalist id="oil_type">
				<option>95# 汽油</option>
				<option>92# 汽油</option>
				<option>0# 柴油</option>
			</datalist>
			
			<label for="加油总金额">加油总金额:</label> 
			<div class="input-with-unit">
			<input type="number" id="加油总金额" name="加油总金额" placeholder="请输入加油总金额" required>
			<span class="unit">元</span>
			</div>

			<label for="油卡加油量">油卡加油量:</label> 
			<div class="input-with-unit">
			<input type="number" id="油卡加油量" name="油卡加油量" placeholder="请输入油卡加油量" required>
			<span class="unit">升</span>
			</div>
			
			<label for="现金加油量">现金加油量:</label> 
			<div class="input-with-unit">
			<input type="number" id="现金加油量" name="现金加油量" placeholder="请输入现金加油量" required>
			<span class="unit">升</span>
			</div> 
			
			<label for="经办人">经办人:</label>
			<input type="text" id="经办人" name="经办人" placeholder="请输入经办人"required>
			
			<label for="登记人">登记人:</label>
			<input type="text" id="登记人" name="登记人" value="张三" disabled> 
			<label for="最新一次修改人">最新一次修改人:</label> 
			<input type="text" id="最新一次修改人"name="最新一次修改人" value="李四" disabled>
		</div>

		<div class="right-inputs">
			<label for="加油日期"><span class="prompt">*</span>加油日期:</label>
			<input type="date" id="加油日期" name="加油日期"required>
			
			<label for="本次加油总油量">本次加油总油量:</label> 
			<div class="input-with-unit">
			<input type="number" id="本次加油总油量" name="本次加油总油量" placeholder="请输入本次加油总油量" required>
			<span class="unit">升</span>
			</div>
			
			<label for="油卡号">油卡号:</label>
			<input type="text" id="油卡号" name="油卡号" placeholder="请输入油卡号"required>
			 
			<label for="油卡加油价值">油卡加油价值:</label> 
			<div class="input-with-unit">
			<input type="number" id="油卡加油价值" name="油卡加油价值" placeholder="请输入油卡加油价值" required>
			<span class="unit">元</span>
			</div>
			
			<label for="现金加油价值">现金加油价值:</label> 
			<div class="input-with-unit">
			<input type="number" id="现金加油价值" name="现金加油价值" placeholder="请输入现金加油价值" required>
			<span class="unit">元</span>
			</div>

			<label for="经办日期">经办日期:</label>
			<input type="date" id="经办日期" name="经办日期"required>
			
			<label for="登记时间">登记时间:</label> 
			<input type="text" id="登记时间" name="登记时间" value="2023-01-01 10:00:00"disabled>
			
			<label for="最新一次修改时间">最新一次修改时间:</label> 
			<input type="text" id="最新一次修改时间" name="最新一次修改时间" value="2023-01-01 12:00:00" disabled>
		</div>

		<div class="bottom-inputs">
			<label for="备注">备注:</label>
			<textarea id="备注" name="备注"></textarea>

			<label for="资料附件">资料附件:</label> <input type="file" id="资料附件" name="资料附件">

		</div>

		<div class="buttons">
			<button type="button">返回</button>
			<button type="submit">提交</button>
			<button type="button">保存</button>
		</div>
	</form>
</body>
</html>